/**
	<scroll-view class="find-wrap"
		:scroll-y="canScroll"
		@touchstart="onTouchStart"
		@touchmove="onTouchMove"
		@touchend="onTouchEnd"
	>
		<view class="update-btn" :style="{transition: uptStyle.transition, transform: uptStyle.transform, opacity: uptStyle.opacity}">
			<text :style="{animationDuration: uptStyle.animationDuration}" class="more-btn"></text>
		</view>
	</scroll-view>
 */

export default {
	data() {
		return {
			canScroll: true,
			uptStyle: {
				transition: 'all 0.3s ease',
				transform: 'translateY(-90rpx) rotate(-90deg)',
				rotate: 0,
				animationDuration: '0s',
			},
			startY: 0,
			scrollTop: 0,
		}
	},
	methods: {
		onScroll(e) {
			this.scrollTop = e.detail.scrollTop;
		},
		onTouchStart(e) {
			this.canScroll = true;
			this.startY = e.touches[0].pageY;
			this.uptStyle.transition = 'none';
			this.uptStyle.transform = 'translateY(-80rpx) rotate(-90deg)';
			this.uptStyle.opacity = 0.6;
			this.uptStyle.animationDuration = '0s';
		},
		onTouchMove(e) {
			this.canScroll = false;
			if (this.scrollTop > 25) return;
			const w = 80;
			const y = e.changedTouches[0].pageY;
			if (y > this.startY) {
				const yy = y - this.startY;
				let opacity = yy / w;
				let translateY = yy - w;
				if (translateY > 2 * w) {
					opacity = 1;
					translateY = 2 * w;
				}
				const rotate = (translateY / (2 * w)) * 360 - 90;
				this.uptStyle.transform = `translateY(${translateY}rpx) rotate(${rotate}deg)`;
				this.uptStyle.opacity = opacity;
			}
		},
		onTouchEnd(e) {
			this.canScroll = true;
			if (this.scrollTop > 25) return;
			this.uptStyle.transition = 'all 0.3s ease';
			const y = e.changedTouches[0].pageY;
			const w = 80;
			if (y - this.startY > 2 * w) {
				this.uptStyle.transform = 'translateY(100rpx) rotate(-90deg)';
				this.uptStyle.opacity = 1;
				this.uptStyle.animationDuration = '2s';
				this.update(() => {
					this.uptStyle.transform = 'translateY(-90rpx) rotate(-90deg)';
					this.uptStyle.animationDuration = '0s';
				});
			} else {
				this.uptStyle.transform = 'translateY(-90rpx) rotate(-90deg)';
				this.uptStyle.opacity = 0.6;
			}
		},
		onStart(e) {
			this.startY = e.touches[0].pageY;
		},
		onEnd(e) {
			const y = e.changedTouches[0].pageY;
			const w = 160;
			if (y - this.startY > 2 * w) {
				this.update();
			}
		},
	}
}